<template>
	<view class="content" v-if="isShow">
		<view class="page-section page-section-gap" style="width: 100%;">
			<map scale="16" style="width: 100%; height: 250px;" :polyline="polyline" :latitude="latitude" :longitude="longitude"
			 :markers="covers">
			</map>
		</view>

		<view class="tips">
			<text class="title">取件地址</text>
			<text class="detail">{{expressAddress}}</text>
		</view>
		<view class="tips" style="margin-bottom: 110upx;">
			<text class="title">送达地址</text>
			<text class="detail">{{express.getAddress}}</text>
		</view>
		<view :class="btn" v-if="express.userId != user.id" @tap="get_express()">
			<text>{{content}}</text> <text v-if="content=='立即接单'" style="font-size: 40upx;margin-left: 12upx;margin-right: 12upx;">￥{{express.price}}</text>
		</view>
		<view class="btn red" @tap="deleteOrder()" v-if="judge">
			<text>删除</text>
		</view>
		<view class="btn red" @tap="contact()" v-if="jud">
			<text>联系帮取人</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	import expressData from "../../static/js/expressData.js";
	export default {
		data() {
			return {
				title: '地图详情',
				latitude: 0,
				longitude: 0,
				covers: [],
				express: {},
				expressAddress: '',
				content: '立即接单',
				phone: '',
				isShow:false
			}
		},
		computed: {
			...mapState(['user']),
			btn() {
				if (this.content == '立即接单') {
					return "btn red"
				} else {
					return "btn yellow"
				}
			},
			judge() {
				if (this.express.userId == this.user.id && !this.express.getUserId) {
					return true;
				}
				return false;
			},
			jud() {
				if (this.express.userId == this.user.id && this.express.getUserId) {
					return true;
				}
				return false;
			}
		},
		methods: {
			contact() {
				if (this.phone.length != 0) {
					uni.makePhoneCall({
						phoneNumber: this.phone
					});
				} else {
					let that = this;
					utils.post("express/getcontact", {
						userId: this.express.getUserId
					}, function(data) {
						that.phone = data;
						uni.makePhoneCall({
							phoneNumber: data
						});
					})
				}
			},
			deleteOrder() {
				let that = this;
				uni.showModal({
					title: '通知提醒',
					content: '确定要删除该快递代取信息吗?',
					showCancel: true,
					cancelText: '手滑了',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							utils.post("express/delete", {
								expressId: that.express.id,
								userId: that.user.id
							}, function(data) {
								uni.navigateBack({
									delta: 1
								});
							})
						}
					}
				});
			},
			get_express() {
				let that = this;
				if (this.content == '立即接单') {
					if (this.user.phone == null || this.user.phone.length == 0) {
						uni.showModal({
							title: '通知提醒',
							content: '你当前未绑定手机号,点确定绑定手机号',
							showCancel: true,
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: "../verificationcode/verificationcode"
									})
								} else {
									return;
								}
							}
						});
						return;
					}
					uni.showModal({
						title: '通知提醒',
						content: '确认接单会将您的手机号姓名等信息发送给客户',
						showCancel: true,
						cancelText: '再想想',
						confirmText: '立即接单',
						success: res => {
							if (res.confirm) {
								utils.post("express/getexpress", {
									userId: that.user.id,
									expressId: that.express.id
								}, function(data) {
									that.content = "查看取件信息";
									uni.navigateTo({
										url: 'success?info=' + JSON.stringify(data) + "&address=" + that.expressAddress
									});
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					utils.post("express/getresult", {
						expressId: this.express.id
					}, function(data) {
						uni.navigateTo({
							url: 'success?info=' + JSON.stringify(data) + "&address=" + that.expressAddress
						});
					})
				}
			}
		},
		onLoad(option) {
			this.express = JSON.parse(option.express);
			let that = this;
			if (this.express.getUserId == this.user.id) {
				this.content = '查看取件信息';
			}
			this.expressAddress = expressData.expresses[this.express.expressAddress].siteName;
			let latitude = expressData.expresses[this.express.expressAddress].zb.latitude;
			let longtitude = expressData.expresses[this.express.expressAddress].zb.longitude;
			uni.getLocation({
				type: "gcj02 ",
				success(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.covers = [{
						latitude: res.latitude,
						longitude: res.longitude,
						iconPath: '../../static/images/ditu.png'
					}, {
						latitude: latitude,
						longitude: longtitude,
						iconPath: '../../static/images/ditu.png'
					}];
				}
			});
			this.isShow = true;
		}
	}
</script>

<style>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tips {
		width: 92%;
		display: flex;
		height: 180upx;
		justify-content: center;
		flex-direction: column;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}

	.title {
		font-size: 40upx;
		font-weight: 600;
		margin-top: 30upx;

	}

	.detail {
		font-size: 26upx;
		margin-top: 20upx;
	}

	.btn {
		width: 100%;
		height: 120upx;
		font-size: 30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: fixed;
		color: #ffffff;
		bottom: 0;
	}

	.red {
		background-color: #EE3F4D;
	}

	.yellow {
		background-color: #F7B952;
	}
</style>
